/** Core: Sass Mixins */

/** Mixin: Responsive */
@mixin small-up {
  @media (min-width: 769px) {
    @content;
  }
}

/** Mixin: Responsive */
@mixin small-down {
  @media (max-width: 768px) {
    @content;
  }
}

/** Mixin: Responsive */
@mixin small-to-medium {
  @media (min-width: 769px) and (max-width: 996px) {
    @content;
  }
}

/** Mixin: Responsive */
@mixin medium-up {
  @media (min-width: 997px) {
    @content;
  }
}

/** Mixin: Responsive */
@mixin medium-down {
  @media (max-width: 996px) {
    @content;
  }
}

/** Mixin: Responsive */
@mixin large-up {
  @media (min-width: 1536px) {
    @content;
  }
}

@mixin xlarge-up {
  @media (min-width: 1920px) {
    @content;
  }
}

/** Mixin: Dark mode */
@mixin dark {
  html[data-theme='dark'] {
    @content;
  }
}

/** Mixin: Light mode */
@mixin light {
  html[data-theme='light'] {
    @content;
  }
}

/** Mixin: Transition */
@mixin transition {
  transition: all 0.2s ease;
}

/** Mixin: Flex */
@mixin flex-row(
  $gap: var(--strapi-spacing-2),
  $align-items: center,
  $justify-content: null
) {
  display: flex;
  flex-direction: row;
  gap: $gap;
  align-items: $align-items;
  justify-content: $justify-content;
}
